<template>
	<div class="clothes">
		<div class="header">
			<div class="header-title">服装列表</div>
			<div class="iconfont">
				
			</div>
		</div>
		<div class="content">
			<div class="content-left" ref="menuList">
				<ul class="menu">
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
					<li class="menu-item vux-1px-b">男装</li>
				</ul>
			</div>
			<div class="content-right" ref="productList">
				<ul class="content-list">
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
					<li class="list-item vux-1px-b">
						<div class="item-avatar">
							<img class="item-img" src="../../assets/images/banner/banner.jpg" />
						</div>
						<div class="item-info">
							<p class="item-name">潮流短袖</p>
							<p class="item-price"><span class="hot">￥199</span>/件</p>
						</div>
						<div class="item-btn">添加该商品</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer"></div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default{
		name:'clothesList',
		mounted(){
			this.BScroll = new BScroll(this.$refs.menuList)
			this.BScroll = new BScroll(this.$refs.productList)
		}
	}
</script>

<style lang="less" scoped>
	@comColor:#ff1351;
	.clothes{
		text-align: left;		
		.header{
			position: relative;
			height: .9rem;
			line-height: .9rem;
			background: @comColor;
			.header-title{
				text-align: center;
				color: #fff;
				font-size: .36rem;
			}
			.iconfont{
				position: absolute;
				top: 0;
				left: 0;
			}	
		}
		.content{
			display: flex;
			position: absolute;
			top: .9rem;
			left: 0;
			right: 0;
			bottom: 1.4rem;
			overflow: hidden;
			background: #fff;
			.content-left{
				width: 2rem;
				.menu-item{
					text-indent: .2rem;
					line-height:1.5rem ;
					background: #f7f7f7;
				}
			}
			.content-right{
				flex: 1;
				margin-left: .2rem;
				.list-item{
					background: #fff;
					position: relative;
					height: 2rem;
					.item-avatar{
						overflow: hidden;
						display: inline-block;
						margin-top: .2rem;
						height: 1.6rem;
						width: 1.6rem;
						border-radius: .1rem;
						.item-img{
							width: 100%;
							height: 100%;
						}
					}
					.item-info{
						vertical-align: top;
						display: inline-block;
						margin-top: .2rem;
						height: 1.6rem;
						.item-name{
							line-height: .8rem;
							font-size: .4rem;							
						}
						.item-price{
							line-height: .8rem;
							.hot{
								color: #f76120;
							}
						}
					}
					.item-btn{
						position: absolute;
						right: .2rem;
						bottom: .2rem;
						padding: .1rem .1rem;
						font-size: .24rem;
						background: @comColor;
						color: #fff;
						border-radius: .1rem;
					}
				}
			}
		}
		.footer{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;	
			height: 1.4rem;
			background: #ccc;
		}
	}
	

</style>